<template>
  <div class="top">
    <div class="butbody">
      <el-tooltip content="点击取消边框" placement="right">
        <button class="but" :style="butcss[0]" @click="cancelborder">
          button
        </button>
      </el-tooltip>

      <div class="para">
        <div class="slider">
          <div class="tip">边框圆角(px)</div>
          <el-slider v-model="butradius" max="20"></el-slider>
        </div>
        <div class="slider">
          <div class="tip">阴影模糊度(px)</div>
          <el-slider v-model="butblur" max="20"></el-slider>
        </div>
        <div class="slider">
          <div class="tip">横向阴影宽度(px)</div>
          <el-slider v-model="butshawidth" :min="-10" :max="10"></el-slider>
        </div>
        <div class="slider">
          <div class="tip">纵向阴影高度(px)</div>
          <el-slider v-model="butshaheight" :min="-10" :max="10"></el-slider>
        </div>
        <div class="colorpickers">
          <div class="picker">
            <el-color-picker v-model="butbgc" />
            <div class="tip">背景色</div>
          </div>
          <div class="picker">
            <el-color-picker v-model="butcolor" />
            <div class="tip">文字色</div>
          </div>
          <div class="picker">
            <el-color-picker v-model="butshacolor" />
            <div class="tip">阴影色</div>
          </div>
          <div class="picker">
            <el-color-picker v-model="butborcolor" />
            <div class="tip">边框色</div>
          </div>
        </div>
      </div>
    </div>
    <div class="code">
      <div class="htmlcode">
        <h3>
          HTML <el-tooltip content="点击复制" placement="right"><el-icon @click="copyhtml"><copy-document /></el-icon></el-tooltip>
        </h3>
        <el-card
          class="card"
          id="htmlcard"
          v-text="myhtml"
          style="padding: 16px"
        ></el-card>
      </div>
      <div class="csscode">
        <h3>
          CSS <el-tooltip content="点击复制" placement="right"><el-icon @click="copycss"><copy-document /></el-icon></el-tooltip>
        </h3>
        <el-card class="card" id="csscard"
          >.mybutton {
          <div v-for="(value, name) in butcss[1]" :key="name">
            {{ name }}: {{ value }};
          </div>
          }</el-card
        >
      </div>
      <button class="mybutton" @click="saveparas">保存参数</button>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { ElNotification } from "element-plus";
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8082";
export default {
  data() {
    return {
      myhtml: '<button class="mybutton">button</button>',
      butradius: "0",
      butshawidth: "3",
      butshaheight: "3",
      butshacolor: "#34083F",
      butblur: "6",
      butbgc: "#DEAAF3",
      butcolor: "#121616",
      butborcolor: "#000000",
      butdisplaycss: {},
    };
  },
  methods: {
    cancelborder() {
      this.butborcolor = "none";
    },
    copyhtml() {
      var copyTest = document.getElementById("htmlcard").innerText;
      var inputTest = document.createElement("input");
      inputTest.value = copyTest;
      document.body.appendChild(inputTest);
      //选中新创建的input元素并获取其中的值
      inputTest.select();
      document.execCommand("Copy");
      inputTest.style.display = "none";
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    },
    copycss() {
      var copyTest = document.getElementById("csscard").innerText;
      var inputTest = document.createElement("input");
      inputTest.value = copyTest;
      document.body.appendChild(inputTest);
      //选中新创建的input元素并获取其中的值
      inputTest.select();
      document.execCommand("Copy");
      inputTest.style.display = "none";
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    },
    saveparas() {
      let name = window.localStorage.getItem("curname");
      //如果在没有token的情况下想进入收藏，将提示先登录
      if (window.localStorage.getItem(name) == null) {
        ElNotification({
          title: "当前登录已过期",
          message: "请重新登录以保存参数",
          type: "warning",
          duration: 2000,
          position: "bottom-right",
        });
      } else if (window.localStorage.getItem(name) == "unlogin") {
        ElNotification({
          title: "您还未登录",
          message: "登录后可使用保存参数功能",
          type: "warning",
          duration: 2000,
          position: "bottom-right",
        });
      } else {
        axios
          .get("/store/add", {
            params: {
              html: this.myhtml,
              css: this.butcss[0],
              displaycss: this.butcss[1],
              type: "button",
              username: name,
            },
          })
          .then((res) => {
            console.log(res.data);
            if (res.data == "ok") {
              ElNotification({
                title: "保存当前参数成功",
                message: "可点击左侧收藏选项查看",
                type: "success",
                duration: 2000,
              });
            } else {
              ElNotification({
                title: "保存当前参数失败",
                message: "出现未知错误",
                type: "fail",
                duration: 2000,
              });
            }
          });
      }
    },
  },
  mounted() {
    let butcss1 = {
      borderRadius: this.butradius + "px",
      border: "0.6px solid " + this.butborcolor,
      padding: "6px",
      height: "20px",
      boxShadow:
        this.butshawidth +
        "px " +
        this.butshaheight +
        "px " +
        this.butblur +
        "px " +
        this.butshacolor,
      backgroundColor: this.butbgc,
      color: this.butcolor,
    };
    let displaycss = {
      "border-radius": butcss1.borderRadius,
      border: butcss1.border,
      padding: "6px",
      height: "20px",
      "box-shadow": butcss1.boxShadow,
      "background-color": butcss1.backgroundColor,
      color: butcss1.color,
    };
    this.butdisplaycss = displaycss;
  },
  computed: {
    butcss() {
      //直接作用于按钮的样式
      let butcss1 = {
        borderRadius: this.butradius + "px",
        padding: "6px",
        height: "35px",
        boxShadow:
          this.butshawidth +
          "px " +
          this.butshaheight +
          "px " +
          this.butblur +
          "px " +
          this.butshacolor,
        backgroundColor: this.butbgc,
        color: this.butcolor,
      };
      if (this.butborcolor == "none") butcss1["border"] = "none";
      else {
        butcss1["border"] = "0.6px solid " + this.butborcolor;
      }
      //用于显示代码的样式
      let displaycss = {
        "border-radius": butcss1.borderRadius,
        border: butcss1.border,
        padding: "6px",
        "box-shadow": butcss1.boxShadow,
        "background-color": butcss1.backgroundColor,
        color: butcss1.color,
        "text-align": "center",
        height: "35px !important",
        outline: "none",
      };
      return [butcss1, displaycss];
    },
  },
};
</script>

<style scoped>
.tip {
  font-size: small;
}
.top {
  width: 60%;
  margin: 0 auto;
  display: flex;
}
.butbody {
  display: flex;
  flex-direction: column;
  width: 70%;
}
.para {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
}
.code {
  margin: 28px 70px;
}
.htmlcode {
  margin: 15px;
  font-size: small;
}
.csscode {
  margin: 15px;
  font-size: small;
}
.slider {
  margin-top: 10px;
}
.but {
  width: 20%;
  text-align: center;
  height: 35px !important;
  outline: none;
  margin-bottom: 10px;
  margin-top: 50px;
}
.colorpickers {
  margin-top: 15px;
  display: flex;
}
.picker {
  margin-right: 20px;
}
.card {
  background-color: rgba(108, 80, 137, 0.3);
  background: rgba(108, 80, 137, 0.3);

  color: azure;
}
</style>